<template>
  <header v-if="currentConversation" class="message-info-view-header flex-bc">
    <div class="message-info-views">
      <p v-if="currentType">
        <span v-if="chatType('C2C')" @click="openUser" class="single">
          <span class="nick">{{ chatNick("C2C", currentConversation) }}</span>
      
          <div
            v-if="isShowPromptTitle"
            @click="openPrompt"
            class="cursor-pointer ml-5 ai-prompt-title"
          >
            {{ getPromptTitle }}
          </div>
          <!-- ai-tools -->
          <!-- <template v-if="isAssistant && toolsStore.botTools && isShowBotTools">
            <div v-for="item in toolsStore.botTools" :key="item.id" class="ml-5 ai-prompt-title">
              <svg-icon class="function-call" local-icon="functionCall" />
              <span>{{ item.meta.title }}</span>
            </div>
          </template> -->
          <!-- <el-tooltip
            v-if="isAssistant"
            :show-arrow="false"
            :content="`助手将只记住最后${robotStore.getBotMessageCount}条消息`"
            placement="bottom"
          >
            <div v-if="isAssistant" class="lucide-history ai-prompt-title">
              <SvgIcon local-icon="lucide-history" />
              <span>
                {{ robotStore.getBotMessageCount }}
              </span>
            </div>
          </el-tooltip> -->
        </span>
        <span v-else-if="chatType('GROUP')" @click="openSetup" class="group">
          <span class="nick"> {{ chatNick("GROUP", currentConversation) }}</span>
          <Label :item="currentConversation" />
        </span>
        <span v-else-if="chatType('@TIM#SYSTEM')" class="system"> 系统通知 </span>
      </p>
    </div>
    <div class="flex gap-15px">
      <!-- <div class="message-info-add" v-show="currentConversation.type === 'GROUP' && false" title="添加成员">
        <svg-icon local-icon="tianjia" class="icon-hover" />
      </div> -->
      <div class="share" title="分享对话" @click="openShare">
        <Icon :icon="'ep:share'" class="cursor-pointer icon-hover" />
      </div>
      <div class="setup" title="详情" @click="openSetup">
        <Icon :icon="'ep:more-filled'" class="cursor-pointer icon-hover" />
      </div>
    </div>
  </header>
</template>

<script setup>
import { storeToRefs } from "pinia";
import { useRobotStore, useChatStore, useToolsStore } from "@/chat/stores/index";
import Label from "./Label.vue";
import emitter from "@/utils/mittBus";

const chatStore = useChatStore();
const robotStore = useRobotStore();
const toolsStore = useToolsStore();

const { isAssistant, isGroupChat, currentType, currentConversation } = storeToRefs(chatStore);
const { getPromptTitle, isShowBotTools, isShowPromptTitle } = storeToRefs(robotStore);

const chatType = (type) => {
  return currentType.value === type;
};

const chatNick = (type, chat) => {
  if (type === "C2C") {
    return chat.userProfile?.nick || chat.userProfile?.userID || chat?.remark || "";
  } else if (type === "GROUP") {
    const {
      groupProfile: { name, groupID, memberCount },
    } = chat;
    const count = memberCount ? `(${memberCount})` : "";
    return `${name || groupID} ${count}`;
  }
};

const openPrompt = () => {
  emitter.emit("onRobotBox", { promptFocus: true });
};

const openShare = () => {
  chatStore.$patch({ showCheckbox: true });
};

const openSetup = () => {
  emitter.emit("handleShowDetail", true);
};

const openUser = () => {};
</script>

<style lang="scss" scoped>
.message-info-view-header {
  height: 60px;
  min-height: 60px;
  padding: 0 16px;
  width: 100%;
  position: relative;
  z-index: 2;
  background: var(--color-body-bg);
  border-bottom: 1px solid var(--color-border-default);
  .message-info-views {
    .group {
      cursor: pointer;
    }
    .single,
    .group {
      max-width: 500px;
      display: flex;
      align-items: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      .nick {
        margin-right: 5px;
      }
    }
  }
  .ai-prompt-title {
    white-space: nowrap;
    background: #fffbe6;
    border: 0.64px solid rgb(255 209 60);
    color: #faad14;
    border-radius: 2px;
    font-size: 12px;
    padding: 0 5px;
    display: inline-block;
    height: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
  }
  .lucide-history {
    margin-left: 5px;
    // border: 0.64px solid rgb(145, 213, 255);
  }
}
</style>
